<template>
  <div>
      <div class="scroll-list-wrap" :style="{height:getWindowHeight+'px'}">
      <cube-scroll
        ref="scroll"
        :data="storedata"
        :options="options"
        @pulling-up="onPullingUp"
        >
          <div class="head">
                <div class="fenxiang_btn" @click="is_share_mark()">
                    <i class="fenxiang_icon" :style="fenxiang_icon"></i>
                </div>
                <img :src="storedetail.store_facade" alt="">
          </div>
          <div class="wrapper">
              <div class="head_shop_name">{{ storedetail.name }}</div>
              <div class="shop_info">
                  <div class="shop_img_box">
                      <div class="item">
                          <img :src="storedetail.logo" alt="">
                      </div>
                  </div>
                  <div class="fl">
                      <p>店铺地址：{{ storedetail.address}}</p>
                      <p v-if="storedetail.kf_mobile">联系方式：{{ storedetail.kf_mobile}}</p>
                  </div>
                  <div class="shop_right">
                      <div class="phone_box" v-if="storedetail.kf_mobile" @click="phoneCall(storedetail.kf_mobile)">
                          <i :style="combinedshape_icon"></i>
                      </div>
                      <!-- <a :href="'tel:' + storedetail.kf_mobile"><i class="phone_icon" :style="phone_icon"></i></a> -->
                  </div>
              </div>
              <div class="nav border-bottom-1px">
                  <div class="item">
                      <a href="javascript:;" class="nav_btn" :class="{action:comaction=='itemFollow'}" @click="changecomponent('itemFollow')">店铺优惠</a>
                  </div>
                  <div class="item">
                     <a href="javascript:;" class="nav_btn" :class="{action:comaction=='itemGoods'}" @click="changecomponent('itemGoods')">商品展示&nbsp;&nbsp;({{storedetail.goods_num}})</a>
                  </div>
                  <div class="item">
                      <a href="javascript:;" class="nav_btn" :class="{action:comaction=='itemDynamic'}" @click="changecomponent('itemDynamic')">店铺动态</a>
                  </div>
              </div>
          </div>
                <component :is="comaction" :storedata="storedata" ></component>
        </cube-scroll>
      </div>
          <div>
            <footer>
                <div class="foot border-top-1px">
                    <router-link class="item" tag="div" :to="{ name:'index'}">
                        <p>首页</p>
                    </router-link>
                    <div class="item" @click="doattention">
                        <p>{{attention_msg}}</p>
                    </div>
                    <div class="item" @click="open_baidu_map">
                        <p>导航到店</p>
                    </div>
                </div>
            </footer>
        </div>
        <div class="cezhao" v-if="is_mark" @click="is_share_mark()">
            <img :src="share_mark" alt="">
        </div>
  </div>
</template>
<script>
import itemFollow from '@/components/ShopDetailsItemFlollow'
import itemGoods from '@/components/ShopDetailsItemGoods'
import itemDynamic from '@/components/ShopDetailsItemDynamic'
import {Throttle,Debounce} from '@/util/date.js';
import share_mark from '@/assets/share_mark.png'
export default {
    data(){
        return{
            phone_icon:{
                backgroundImage: "url(" + require("../assets/product_phone@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            combinedshape_icon:{
                backgroundImage: "url(" + require("../assets/phone@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            fenxiang_icon:{
                backgroundImage: "url(" + require("../assets/fenxiang_icon@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            storedetail:[],
            comaction:'itemFollow',
            storedata:[],
            dynamic_page:1,
            maxLen:33,
            attention_msg:'关注店铺',
            store_facade:"",//店铺门头照
            share_mark:share_mark,//分享图片
            is_mark:false,
        }
    },
    metaInfo: {
      title: "店铺详情"
    },
    methods:{
        changecomponent:Debounce(function(com){
        if(this.comaction == com){
                return;
        }
          this.comaction = com;
          this.dynamic_page=1;
          this.goods_page=1
          this.coupon_page=1;
          this.storedata=[];
          this.$router.push({
              name:'ShopDetails',query:{store_id:this.$route.query.store_id,type:com}
          });
          this.loadItem();
      },500),
        goback(){
            this.$router.go(-1);
        },
        is_share_mark(){
            this.is_mark = !this.is_mark;
        },
        getStoreDetail:function(){
            let that = this;
            let url = "/fang/store/get_store_info";
            let store_id = this.$route.query.store_id;
            that.$axios.post(url,this.$qs.stringify({
                store_id:store_id,
            })).then(function(response){
                let res = response.data;
                if(res.status == 1){
                  that.storedetail = res.data;
                  console.log(that.storedetail);
                }
            })
            .catch(function(error){
                console.log(error);
            });
        },
        loadItem:function(){
          if(this.comaction == 'itemDynamic'){
            this.loadStoreDynamic();
          }else if(this.comaction == 'itemGoods'){
            this.loadStoreGoods();
          }else if(this.comaction == 'itemFollow'){
            this.loadStoreCoupon();
          }
        },
        loadStoreCoupon:Throttle(function(){
            let that = this;
            let url = "/fang/store/get_store_coupon?page="+this.coupon_page;
            let store_id = this.$route.query.store_id;
            that.$axios.post(url,this.$qs.stringify({
                store_id:store_id,
            })).then(function(response){
                let res = response.data;
                if(res.status == 1){
                    if(res.data.data.length > 0){
                      res.data.data.forEach(function(val,index){
                        that.storedata.push(val);
                      });
                      console.log(that.storedata);
                      that.coupon_page = parseInt(res.data.current_page)+1;
                    }else{
                      that.$refs.scroll.forceUpdate()
                    }
                }
            })
            .catch(function(error){
                console.log(error);
            });
        },2000),
        loadStoreGoods:Throttle(function(){
            let that = this;
            let url = "/fang/store/get_store_goods?page="+this.goods_page;
            let store_id = this.$route.query.store_id;
            that.$axios.post(url,this.$qs.stringify({
                store_id:store_id,
            })).then(function(response){
                let res = response.data;
                if(res.status == 1){
                    if(res.data.data.length > 0){
                      res.data.data.forEach(function(val,index){
                        that.storedata.push(val);
                      });
                      console.log(that.storedata);
                      that.goods_page = res.data.current_page+1;
                    }else{
                      that.$refs.scroll.forceUpdate()
                    }
                }
            })
            .catch(function(error){
                console.log(error);
            });
        },2000),
        loadStoreDynamic:Throttle(function(){
            let that = this;
            let url = "/fang/store/get_store_dynamic?page="+this.dynamic_page;
            let store_id = this.$route.query.store_id;
             that.$axios.post(url,this.$qs.stringify({
                store_id:store_id,
            })).then(function(response){
                let res = response.data;
                if(res.status == 1){
                    if(res.data.data.length > 0){
                      res.data.data.forEach(function(val,index){
                        if(val){
                          if(val.content.length > that.maxLen){
                            val.slice_content = val.content.slice(0, that.maxLen) + "...";
                            val.is_slice = true;
                            val.slice_show = true;
                            val.content_show = false;
                          }else{
                            val.slice_content = val.content;
                            val.is_slice = false;
                            val.slice_show = true;
                            val.content_show = false;
                          }
                          let ts_time = that.caculate_time(val.created_at);
                          let msg = '';
                          if(ts_time[0] != 0){
                              msg = ts_time[0]+'天前';
                          }else if(ts_time[1] != 0){
                              msg = ts_time[1]+'小时前';
                          }else if(ts_time[2] != 0){
                              msg = ts_time[2]+'分钟前';
                          }else if(ts_time[3] != 0){
                              msg = '刚刚';
                          }
                          val.timemsg = msg;
                        }
                        that.storedata.push(val);
                      });
                      that.dynamic_page = res.data.current_page+1;
                    }else{
                      that.$refs.scroll.forceUpdate()
                    }
                }
            })
            .catch(function(error){
                console.log(error);
            });
        },2000),
        pullUpLoadObj: function() {
          return this.pullUpLoad  ? {
            threshold: parseInt(this.pullUpLoadThreshold),
            txt: {
              more: this.pullUpLoadMoreTxt,
              noMore: this.pullUpLoadNoMoreTxt
            }
          } : false;
        },
        onPullingUp:function(){
          this.loadItem();
        },
        caculate_time(created_at){
          let now_time = new Date().getTime();
          let old_time = parseInt(created_at) * 1000;
          let time = now_time - old_time;
          let day = parseInt(time / (24 * 60 * 60));//计算整数天数
          //计算出相差天数
          day =Math.floor(time/(24*3600*1000))

          //计算出小时数
          let leave1=time%(24*3600*1000)    //计算天数后剩余的毫秒数
          let hours=Math.floor(leave1/(3600*1000))
          //计算相差分钟数
          let leave2=leave1%(3600*1000)        //计算小时数后剩余的毫秒数
          let minutes=Math.floor(leave2/(60*1000))
          //计算相差秒数
          let leave3=leave2%(60*1000)      //计算分钟数后剩余的毫秒数
          let seconds=Math.round(leave3/1000)
          return [day,hours,minutes,seconds];
        },
        check_attention:function(){
            let that = this;
            let url = "/fang/store/attention_info";
            var store_id = this.$route.query.store_id
            that.$axios.post(url,that.$qs.stringify({
                access_token:that.$store.state._token01,
                store_id:store_id,
            }))
            .then(function(response){
                let res = response.data;
                if(res.status == 1){
                    if(res.data.type == '1'){
                      that.attention_msg='取消关注';
                    }else{
                      that.attention_msg='关注店铺';
                    }
                }

            })
            .catch(function(error){
                console.log(error);
            });
        },
        phoneCall:function(phone){
            window.location.href = 'tel://'+phone;
        },
        doattention:function(){
            let that = this;
            let _user_mark = that.$store.state._user_mark;
            console.log(_user_mark,"_user_mark");
            if(_user_mark){
                let content = "需要注册才能领取,去注册";
                that.createDialog(content);
            }else{
                let url = "/fang/store/user_attention";
                var store_id = this.$route.query.store_id
                that.$axios.post(url,that.$qs.stringify({
                    access_token:that.$store.state._token01,
                    store_id:store_id,
                }))
                .then(function(response){
                    console.log(response);
                    let res = response.data;
                    if(res.status == 1){
                        if(res.data.type == '1'){
                          that.attention_msg='取消关注';
                        }else{
                          that.attention_msg='关注店铺';
                        }
                    }else if (res.status == -1) {
                        that.noLogin();
                    }

                })
                .catch(function(error){
                    console.log(error);
                });
            }
        },
        binzeronefun:function(){
            this.$router.push("/binzerone");
        },
        createDialog(content){
            this.$createDialog({
               type: 'confirm',
               icon: 'cubeic-alert',
               title: '提示信息',
               content: content,
               confirmBtn: {
                 text: '确定',
                 active: true,
                 disabled: false,
                 href: 'javascript:;'
               },
               cancelBtn: {
                 text: '取消',
                 active: false,
                 disabled: false,
                 href: 'javascript:;'
               },
               onConfirm: () => {
                   this.binzeronefun()
               },
               onCancel: () => {

               }
             }).show()
        },
        open_baidu_map:function(){
          let store_lat = this.storedetail.lat;
          let store_lng = this.storedetail.lng;
          let store_address = this.storedetail.address;

          let my_lat = this.$store.state.latitude;
          let my_lng = this.$store.state.longitude;
          let my_address = this.$store.state.address_info.address;
          let url = 'http://api.map.baidu.com/direction?origin=latlng:'+my_lat+','+my_lng+'|name:'+my_address+'&destination=latlng:'+store_lat+','+store_lng+'|name:'+store_address+'&mode=driving&region=中国&output=html&src=webapp.baidu.openAPIdemo';
          window.location.href=url;
        }
    },
    components:{
        itemFollow,
        itemGoods,
        itemDynamic
    },
    computed: {
      getWindowHeight(){
        let height = document.documentElement.clientHeight || document.body.clientHeight;
        return height;
      },
      options() {
        return {
          pullUpLoad: this.pullUpLoadObj,
          scrollbar: true
        }
      }
    },
    created:function(){
        document.getElementsByTagName("body")[0].className="shop_details_active";
    },
    mounted:function(){
        document.getElementsByTagName("body")[0].className="shop_details_active";
    },
    activated:function(){
        document.getElementsByTagName("body")[0].className="shop_details_active";
        this.dynamic_page=1;
        this.goods_page=1
        this.coupon_page=1;
        this.storedata=[];
        this.comaction = this.$route.query.type;
        if(!this.$route.query.type){
              this.comaction = "itemFollow";
         }
        this.getStoreDetail();
        this.loadItem();
        this.check_attention();
    },
    beforeCreate:function(){
        document.getElementsByTagName("body")[0].className="shop_details_active";
    },
    beforeDestroy: function() {
        document.body.removeAttribute("class","shop_details_active");
    },
    deactivated:function(){
        //deactivated使用keep-alive以后推出页面只会触发deactivated
        document.body.removeAttribute("class","shop_details_active");
    }
}
</script>
<style scoped>
.head{
    height: 3.92rem;
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-image: linear-gradient(0deg,hsla(0,0%,100%,0),rgba(0,0,0,.5));
}
.head img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(10px);
    -webkit-filter: blur(10px); /* Chrome, Opera */
    -moz-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.wrapper >.head_shop_name{
    font-size: .64rem;
    padding:.2rem .48rem;
    color: #292929;
    font-weight: bold;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    position: absolute;
    z-index: 3;
    left: 3.84rem;
    top: -.4rem;
    text-align: left;
    background: #ffffff;
    background:rgba(255,255,255,1);
    box-shadow:0px .08rem .16rem 0px rgba(237,237,237,0.5);
    border-radius:.32rem 0px .32rem 0px;
    max-width: 7rem;
}
.head .fenxiang_btn{
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 0;
    right: 0.5rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    z-index: 3;
}
.head .fenxiang_btn .fenxiang_icon{
    width: .92rem;
    height: .92rem;
}
.wrapper{
    position: relative;
    z-index: 2;
}
.wrapper .shop_info{
    /* height: 2.8rem; */
    display: flex;
}
.wrapper .shop_info .shop_img_box{
    width: 2.4rem;
    margin-left: .8rem;
    flex: none;
}
.wrapper .shop_info .fl{
    flex: 1;
    padding-left: .44rem;
    padding-top: .8rem;
    text-align: left;
    overflow: hidden;

}
.wrapper .shop_info .shop_right{
    width: 2.44rem;
    flex: none;
}
.wrapper .shop_info .shop_right .phone_box{
    width:1.12rem;
    height:1.12rem;
        margin-top: -.6rem;
    background:rgba(255,255,255,1);
    box-shadow:0px 4px 8px 0px rgba(227,227,227,0.5);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.wrapper .shop_info .shop_right .phone_box > i{
    display: block;
    width:.62rem;
    height:.62rem;
}
.wrapper .shop_info .shop_img_box .item{
    width: 2.4rem;
    height: 2.4rem;
    border-radius:50%;
    margin-top: -1.2rem;
    border-radius: 50%;
    border: .12rem solid #ffffff;
        box-shadow: 0 .06rem .3rem #e4e4e4;
}
.wrapper .shop_info .shop_img_box .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius:50%;
}
.wrapper .shop_info .fl>p{
    font-size: .48rem;
    color: #252525;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: .32rem;
    line-height: 1.1;
}
.wrapper .shop_right .phone_icon{
    display: block;
    width: .96rem;
    height: .96rem;
    margin-top: .94rem;
    margin-right: 1.36rem;
}
.wrapper .nav{
    height: 2.54rem;
    display: flex;
}
.wrapper .nav .item{
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.wrapper .nav .item .nav_btn{
    line-height: 2.54rem;
    font-size: .64rem;
    color: #505050;
    font-weight: 500;
    height: 100%;
}
.wrapper .nav .item .action{
    color: #252525;
    font-weight: 600;
    position: relative;
}
.wrapper .nav .item .action::after{
    content: "";
    display: block;
    width:1.56rem;
    height:.17rem;
    background: #0CB699;
    border-radius: .16rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);

}
.foot{
    position: fixed;
    left: 0;
    bottom: 0;
    height: 1.96rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
    z-index: 99;
}
.foot .item{
    flex: 1;
    position: relative;
}
.foot > div:first-child::after{
    content: "";
    display: block;
    height: .72rem;
    width: .04rem;
    background: #D8D8D8;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0 , -50%);
}
.foot > div:nth-child(2)::after{
    content: "";
    display: block;
    height: .72rem;
    width: .04rem;
    background: #D8D8D8;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0 , -50%);
}
.foot .item p{
    font-size: .64rem;
    color: #040404;
    font-weight: bold;
}
.cezhao{
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #ffffff;
    background-color: #25262d;
    opacity: .8;
    z-index: 99;
}
.cezhao img{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: auto;
}
/* .foot .item .on{
    color: #56D35E;
} */
</style>
